<template>
	<Nav class="f" bgColor="#fff">
		<view class="title dispaly-center p-l-32 nav" @click="$goUrl('back')">
			<view class="icon dispaly-align-center">
				<image src="/static/icon/left.png" mode="aspectFill"></image>
				<!-- <u-icon name="arrow-left" color="#fff" size="34"></u-icon> -->
			</view>
			<view class="r-name">我的优惠券</view>
		</view>
	</Nav>
	<view :style="{ marginTop: navHeiht + 'px' }">
		<view class="content p-32">
			<view class="coupon">
				<view :class="{ ac: index % 2 == 0 }" class="c-item dispaly-center" v-for="(item, index) in couponList" :key="index">
					<view class="t-left f-2">
						<view class="price">￥{{ item.price }}</view>
						<view class="t-name">{{ item.name }}</view>
					</view>
					<view class="f-4 middle">
						<view class="type-name">{{ item.typeName }}</view>
						<view class="time">有效期至{{ item.time }}</view>
					</view>
					<view class="f-1 sy dispaly-align-center" v-if="index % 2 == 0" @click="useCoupon(item)">使用</view>
					<view class="f-1 more dispaly-align-center" v-else>已过期</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue';
import { getElementHeight } from '@/utils/util';

const couponList = ref([
	{
		id: 1,
		name: '现金券',
		price: 200,
		typeName: '通用现金券',
		time: '2024-07-27'
	}
]);
// 获取元素高度
const navHeiht = ref(0);
onMounted(async () => {
	for (var i = 0; i < 10; i++) {
		couponList.value.push({
			id: 1,
			name: '现金券',
			price: 200,
			typeName: `通用现金券${i}`,
			time: '2024-07-27'
		});
	}
	const res = await getElementHeight('.f');
	navHeiht.value = res;
});
</script>

<style lang="scss" scoped>
.home-content {
	margin: 0 32rpx;
}

.tag {
	margin-right: 10rpx;
}

.ac {
	background-color: #eaeaee !important;
}

.r-name {
	color: #020121;
}

.title {
	.icon {
		image {
			width: 40rpx;
			height: 40rpx;
		}
	}
}

.content {
	.coupon {
		.c-item:last-child {
			margin-bottom: 0;
		}

		.c-item {
			padding: 28rpx 40rpx;
			background: #ffffff;
			border-radius: 20rpx;
			// border: 2rpx solid #000000;
			margin-bottom: 16rpx;

			.t-left {
				border-right: 2rpx solid #3d3d3d;

				.price {
					font-family: Source Han Sans, Source Han Sans;
					font-weight: 500;
					font-size: 48rpx;
					color: #020121;
				}

				.t-name {
					font-family: Source Han Sans, Source Han Sans;
					font-weight: 400;
					font-size: 28rpx;
					color: #020121;
				}
			}

			.middle {
				margin-left: 40rpx;

				.type-name {
					font-family: Source Han Sans, Source Han Sans;
					font-weight: 900;
					font-size: 36rpx;
					color: #020121;
				}

				.time {
					margin-top: 10rpx;
					font-family: Source Han Sans, Source Han Sans;
					font-weight: 400;
					font-size: 24rpx;
					color: #020121;
				}
			}

			.sy {
				width: 96rpx;
				height: 48rpx;
				background: #020121;
				border-radius: 24rpx;
				font-family: Source Han Sans, Source Han Sans;
				font-weight: 400;
				font-size: 24rpx;
				color: #ffffff;
			}
			.more {
				font-family: Source Han Sans, Source Han Sans;
				font-weight: 400;
				font-size: 28rpx;
				color: #7b7b89;
			}
		}
	}
}
</style>
